<template>
  <div>
    <!-- 头部tab -->
    <div class="top_tab">
      <div class="left" @click="back()">
        <img src="../assets/order_center/shangs.png">
      </div>
      <span>资质信息上传</span>
      <div class="right">
      </div>
    </div>
		<div class="center">
			<div class="xx">
				<span>企业法人身份证</span>
			</div>
			<div class="big">
				<el-upload
  					class="avatar-uploader"
  					action="/api/upload"
					  :data="{token:token,user_id:myid}"
  					:show-file-list="false"
  					:on-success="handleAvatarSuccess1"
  					:before-upload="beforeAvatarUpload">
  					<img v-if="imageUrl1" :src="imageUrl1" class="avatar">
  					<i v-else class="el-icon-upload avatar-uploader-icon"></i>
					<div v-if="!imageUrl1" class="el-upload__text">法人身份证正面</div>
				</el-upload>
			</div>
			<div class="big sf">
				<el-upload
  					class="avatar-uploader"
  					action="/api/upload"
					  :data="{token:token,user_id:myid}"
  					:show-file-list="false"
  					:on-success="handleAvatarSuccess2"
  					:before-upload="beforeAvatarUpload">
  					<img v-if="imageUrl2" :src="imageUrl2" class="avatar">
  					<i v-else class="el-icon-upload avatar-uploader-icon"></i>
					<div v-if="!imageUrl2" class="el-upload__text">法人身份证反面</div>
				</el-upload>
			</div>
			<div class="xx">
				<span>企业营业执照</span>
			</div>
			<div class="big">
				<el-upload
  					class="avatar-uploader"
  					action="/api/upload"
					:data="{token:token,user_id:myid}"
  					:show-file-list="false"
  					:on-success="handleAvatarSuccess3"
  					:before-upload="beforeAvatarUpload">
  					<img v-if="imageUrl3" :src="imageUrl3" class="avatar">
  					<i v-else class="el-icon-upload avatar-uploader-icon"></i>
					<div v-if="!imageUrl3" class="el-upload__text">企业营业执照</div>
				</el-upload>
			</div>
			<div class="btn">
				<button class="next" @click="auditClick()">下一步</button>
			</div>
		</div>
		
	</div>
</template>

<script>
export default {
  name: "phone_approve",
  data() {
    return {
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
      id_card_picture_front: "",
      id_card_picture_back: "",
      qy_license_picture: "",
      bank_site_id: ""
    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
    //图片上传成功的回调
    handleAvatarSuccess1(res, file) {
      this.imageUrl1 = URL.createObjectURL(file.raw);
      this.id_card_picture_front = res.data;
    },
    handleAvatarSuccess2(res, file) {
      this.imageUrl2 = URL.createObjectURL(file.raw);
      this.id_card_picture_back = res.data;
    },
    handleAvatarSuccess3(res, file) {
      this.imageUrl3 = URL.createObjectURL(file.raw);
      this.qy_license_picture = res.data;
    },

    //上传的限制条件
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isGif = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isJPG && !isPNG && !isGif) {
        this.$dialog.toast({ mes: "只能是JPG,Png,gif格式!" });
      }
      if (!isLt2M) {
        this.$dialog.toast({ mes: "上传图片不能大于20M" });
      }
      return (isJPG && isLt2M) || isPNG || isGif;
    },
    auditClick() {
      if (!this.id_card_picture_front) {
        this.$dialog.toast({ mes: "请上传法人身份证正面" });
        return;
      }
      if (!this.id_card_picture_back) {
        this.$dialog.toast({ mes: "请上传法人身份证反面" });
        return;
      }
      if (!this.qy_license_picture) {
        this.$dialog.toast({ mes: "请上传企业营业执照" });
        return;
      }
      let self = this;
      let url = "/api/business/check";
      self.httpPost(
        url,
        {
          user_id: this.myid,
          token: this.token,
          bus_name: this.bus_name,
          bus_pai: this.bus_pai,
          bus_cityaddre: this.bus_cityaddre,
          bus_addre: this.bus_addre,
          bus_phone: this.bus_phone,
          bus_begin: this.bus_begin,
          bus_end: this.bus_end,
          bus_industry: this.bus_industry,
          bus_license_type: this.bus_license_type,
          bus_license_num: this.bus_license_num,
          bus_license_begin: this.bus_license_begin,
          bus_license_end: this.bus_license_end,
          pipe_name: this.pipe_name,
          cust_name: this.cust_name,
          bus_sign: this.bus_sign,
          bus_out_sign: this.bus_out_sign,
          js_bus_type: this.js_bus_type,
          js_bus_status: this.js_bus_status,
          open_bank: this.open_bank,
          qsli_bank_num: this.qsli_bank_num,
          open_name: this.open_name,
          receive_num: this.receive_num,
          finance_name: this.finance_name,
          finance_phone: this.finance_phone,
          legalperson_name: this.legalperson_name,
          legalperson_sex: this.legalperson_sex,
          legalperson_type: this.legalperson_type,
          legalperson_country: this.legalperson_country,
          legalperson_num: this.legalperson_num,
          legalperson_begin: this.legalperson_begin,
          legalperson_end: this.legalperson_end,
          legalperson_phone: this.legalperson_phone,
          legalperson_email: this.legalperson_email,
          legalperson_job: this.legalperson_job,
          legalperson_addre: this.hand_bank_card_picture,
          id_card_picture_front: this.id_card_picture_front,
          id_card_picture_back: this.id_card_picture_back,
          qy_license_picture: this.qy_license_picture,
          bank_site_id: this.fhid
        },
        function(res) {
          if (res.code == 200) {
            self.$dialog.toast({ mes: "商户申请提交成功" });
            setTimeout(function() {
              self.$router.push("./mine");
            }, 1000);
          }
        }
      );
    } 
  },
  created() { 
    document.title = "物质信息上传";
    //获取token和userid
    this.token = localStorage.getItem("mytoken");
    this.myid = localStorage.getItem("myid");
    
    this.fhid = localStorage.getItem("fhid");
    this.bus_name = localStorage.getItem("bus_name");
    this.bus_pai = localStorage.getItem("bus_pai");
    this.bus_cityaddre = localStorage.getItem("bus_cityaddre");
    this.bus_addre = localStorage.getItem("bus_addre");
    this.bus_phone = localStorage.getItem("bus_phone");
    this.bus_begin = localStorage.getItem("bus_begin");
    this.bus_end = localStorage.getItem("bus_end");
    this.bus_industry = localStorage.getItem("bus_industry");
    this.bus_license_type = localStorage.getItem("bus_license_type");
    this.bus_license_num = localStorage.getItem("bus_license_num");
    this.bus_license_begin = localStorage.getItem("bus_license_begin");
    this.bus_license_end = localStorage.getItem("bus_license_end");
    this.pipe_name = localStorage.getItem("pipe_name");
    this.cust_name = localStorage.getItem("cust_name");
    this.bus_sign = localStorage.getItem("bus_sign");
    this.bus_out_sign = localStorage.getItem("bus_out_sign");
    this.js_bus_type = localStorage.getItem("js_bus_type");
    this.js_bus_status = localStorage.getItem("js_bus_status");
    this.open_bank = localStorage.getItem("open_bank");
    this.qsli_bank_num = localStorage.getItem("qsli_bank_num");
    this.open_name = localStorage.getItem("open_name");
    this.receive_num = localStorage.getItem("receive_num");
    this.finance_name = localStorage.getItem("finance_name");
    this.finance_phone = localStorage.getItem("finance_phone");
    this.legalperson_name = localStorage.getItem("legalperson_name");
    this.legalperson_sex = localStorage.getItem("legalperson_sex");
    this.legalperson_type = localStorage.getItem("legalperson_type");
    this.legalperson_country = localStorage.getItem("legalperson_country");
    this.legalperson_num = localStorage.getItem("legalperson_num");
    this.legalperson_begin = localStorage.getItem("legalperson_begin");
    this.legalperson_end = localStorage.getItem("legalperson_end");
    this.legalperson_phone = localStorage.getItem("legalperson_phone");
    this.legalperson_email = localStorage.getItem("legalperson_email");
    this.legalperson_job = localStorage.getItem("legalperson_job");
    this.legalperson_addre = localStorage.getItem("legalperson_addre");
  }
};
</script>


<style scoped>
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
  margin-bottom: 0.01rem;
}
.top_tab span {
  color: #333;
  font-size: 0.36rem;
}
.top_tab .right {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab img {
  width: 0.43rem;
}
.ts {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid #cecece;
}
.ts .bar {
  width: 4.02rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ts .bar .red span {
  color: #e63f3f;
  font-size: 0.32rem;
}
.ts .bar .xian {
  width: 0.5rem;
  height: 0.05rem;
  background: #999;
}
.ts .bar .hui span {
  color: #999;
  font-size: 0.32rem;
}
.center {
  width: 100%;
  background: #fff;
  padding: 0 0.3rem 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.center .xx {
  width: 100%;
  height: 0.9rem;
  display: flex;
  align-items: center;
}
.center .xx span {
  font-size: 0.32rem;
  color: #333;
}
.center .big {
  width: 100%;
  height: 2.6rem;
  background: #f2f2f2;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.3rem;
}
.center .sf {
  margin-bottom: 0;
}
.center .short {
  width: 100%;
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.center .short .box {
  width: 48%;
  height: 2.6rem;
  background: #f2f2f2;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.center .short .box img {
  width: 0.89rem;
  height: 0.91rem;
  margin-top: 0.85rem;
}
.center .short .box span {
  font-size: 0.24rem;
  color: #333;
  margin-top: 0.28rem;
}
.center .btn {
  width: 100%;
  display: flex;
  justify-content: center;
}
.center .btn .next {
  width: 100%;
  height: 0.9rem;
  background: #e63f3f;
  border: none;
  border-radius: 10px;
  font-size: 0.32rem;
  color: #fff;
}
.big .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.big .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.big .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 380px;
  height: 110px;
  line-height: 143px;
  text-align: center;
}
.big .avatar {
  width: 380px;
  height: 143px;
  display: block;
}
</style>



